<template>
  <!-- 搜索组件 -->
  <div id="search">
    <div class="search-container">
      <div class="search-title">查询</div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline search">
        <el-form-item label="菜品名称" class="dishes-name">
          <el-input v-model="formInline.dishName" placeholder="输入菜品名称进行查询" clearable @clear="onSearch"></el-input>
        </el-form-item>

        <el-form-item label="菜品类别">
          <el-select v-model="formInline.sort" placeholder="菜品类别" clearable @clear="onSearch">
            <el-option :label="item.category" :value="item.id" v-for="item in dishList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="search-item">
          <el-button type="success" icon="el-icon-search" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
//导入EventBus
import bus from '../EventBus'
export default {
  props: {
    getDataList: {
      type: Array,
      default: []
    },
    newCount: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      formInline: {
        dishName: '', //菜品名称
        sort: '' //菜品类别
      },

      //菜品类型
      dishType: {
        id: '',
        category: ''
      },

      dishList: []
    }
  },
  methods: {
    //点击搜索的函数
    onSearch() {
      //通过兄弟组件传值，将从父组件中获得的接口数据 传给兄弟组件 执行调用函数接口
      bus.$emit(
        'getList',
        // this.getDataList,
        // this.newCount,
        this.formInline.dishName,
        this.formInline.sort
      )

      this.getCategoryList()
    },

    //获取菜品类别接口
    async getCategoryList() {
      const { data: res } = await this.axios.get('/dishSales/type', {
        params: {
          id: this.dishType.id,
          category: this.dishType.category
        }
      })

      if (res.code !== 200) return console.log('调用接口失败')

      this.dishList = res.data
    }
  },
  created() {
    this.getCategoryList()
  }
}
</script>

<style lang="less" scoped>
.search-container {
  background-color: #fff;
  //   height: 8rem;
  border: 0.1rem solid #dbe0e9;
  .search-title {
    height: 4rem;
    background-color: #f2f2f2;
    box-sizing: border-box;
    border-bottom: 0.1rem solid #dbe0e9;
    line-height: 4rem;
    font-size: 1.4rem;
    padding-left: 3rem;
    font-weight: 500;
    color: #666666;
  }
  .search {
    display: flex;
    // flex-wrap: wrap;
    align-items: center;
    margin: 1rem;
    padding: 1.5rem;
    box-sizing: border-box;
    background-color: #f5f9fc;
    .el-form-item {
      margin-bottom: 0;
    }
    .dishes-name {
      margin-left: 1.5rem;
    }
    .block {
      margin-right: 2rem;
      .demonstration {
        font-size: 1.4rem;
        color: #606266;
        margin: 1.5rem;
      }
    }
  }

  .el-form--inline .el-form-item {
    margin-right: 2.5rem;
  }
}
</style>
